<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="build-queue.html">
<link rel="import" href="build-stats.html">
<link rel="import" href="build-view.html">
<link rel="import" href="build-executors.html">
<link rel="import" href="loading-spinner.html">
<link rel="import" href="shared-styles.html">

<dom-module id="app-view">
    <template>
        <style include="shared-styles"></style>
        <style is="custom-style">
            :host {
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
            }

            #container {
                height: 100%;
                width: 100%;
                color: var(--primary-text-color);
                background-color: var(--primary-background-color);
            }

            .fill {
                background-color: var(--primary-background-color);
            }

            .flex {
                width: 100%;
                background-color: var(--primary-background-color);
            }

            @media (min-width: 1024px) {
                .flex {
                    display: flex;
                }
            }

            @media (max-width: 1024px) {
                .flex * {
                    width: 100%;
                }
            }

            @media (min-width: 1620px) {
                .flex {
                    width: 80%;
                    margin: auto;
                }
            }

        </style>

        <div id="container">
            <!-- display on top, builds failures etc. -->
            <build-stats></build-stats>

            <div class="fill">
                <div class="flex">
                    <!-- left sidebar, show queued builds -->
                    <build-queue id="queue"></build-queue>

                    <!-- center of screen -->
                    <!-- click on an item to show the build log, back button for list. -->
                    <build-view id="builds"></build-view>

                    <!-- right sidebar -->
                    <build-executors id="executors"></build-executors>
                </div>

                <loading-spinner></loading-spinner>
            </div>
        </div>

    </template>

</dom-module>
<script>
    class AppView extends Polymer.Element {

        static get is() {
            return 'app-view';
        }
    }
    window.customElements.define(AppView.is, AppView);

</script>
